import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
// import store
import { Action, ActionReducer } from '@ngrx/store';
import { Store } from '@ngrx/store';
// import configure
import { CBCfg, cbCfgList, ConditionItem } from './condition-builder.config';


@Component({
  selector: 'app-condition-builder',
  templateUrl: './condition-builder.html',
  styleUrls: ['./condition-builder.css']
})
export class ConditionBuilderComponent implements OnInit {
  title = 'condtion builder';
  conditions: any;
  items: Array<ConditionItem>;

  @Output() ConditionsItems: EventEmitter<any>         = new EventEmitter();
  @Output() ConditionsItemsOperator: EventEmitter<any> = new EventEmitter();
  @Output() ConditionsItemsValues: EventEmitter<any>   = new EventEmitter();
  @Output() ConditionsItemsComp: EventEmitter<any>     = new EventEmitter();

  @Output() ConditionsItemsGroups: EventEmitter<any>   = new EventEmitter();

  constructor() {
    this.conditions = Object.assign([], cbCfgList);
    this.items = new Array<ConditionItem>();
    console.log(this.conditions);
  }

  onSelectChanged(event: Event): void {
    const value: string = (<HTMLSelectElement>event.srcElement).value;
    console.log(value);
    this.conditions.forEach(element => {
      if (element.id == Number(value)) {
        this.items.push(new ConditionItem(element.id, element.title, element.shortcut, element.condition));
        console.log(this.items, '--- send items ---');
        this.ConditionsItems.emit(this.items);
        this.ConditionsItemsGroups.emit(this.items);
        console.log('--- end call ---');
      }
    });
  }

  onComposeChanged(event: Event, index: number) {
    const value: string   = (<HTMLSelectElement>event.srcElement).value;
    this.items[index].com = value;
    console.log("onComposeChanged index = " + index + " value = " + this.items[index].com);
    this.ConditionsItemsComp.emit(this.items);
    console.log('--- conditions comp ---', this.items);
  }

  onOperatorChanged(event: Event, index: number) {
    const value: string        = (<HTMLSelectElement>event.srcElement).value;
    this.items[index].operator = value;
    console.log("onOperatorChanged index = " + index + " value = " + this.items[index].operator)
    console.log("--- this items ---", this.items, '---');
    this.ConditionsItemsOperator.emit(this.items);
    console.log('--- conditions operator ---', this.items);
  }

  onValueChanged(event: Event, index: number) {
    const value: string     = (<HTMLSelectElement>event.srcElement).value;
    this.items[index].value = Number(value);
    console.log("onValueChanged index = " + index + " value + " + this.items[index].value);
    this.ConditionsItemsValues.emit(this.items);
    console.log('--- condition values ---', this.items);
  }

  onInputValueChanged(event: Event, index: number) {
    const value: string     = (<HTMLSelectElement>event.srcElement).value;
    this.items[index].value = Number(value);
    console.log('on input value = ' + index + 'value = ' + this.items[index].value);
  }

  removeItem(itemIdx: number): void {
    console.log("remove item index = " + itemIdx);
    this.items.splice(itemIdx, 1);
  }

  ngOnInit () {
  }
}
